<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login To Chat</title>
    <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/loginStyle.css">
</head>
<body>
    <div class="login" id="login">
        <header class="header">
          <span class="text">2.NAME</span>
          <span class="loader"></span>
        </header>
        <form class="form">
          <input id="nicknameInput" class="input" type="text", placeholder="Username">
          <button class="btn" type="submit" id="btnLogin"></button>
        </form>
    </div>
    <div class="login" id="face">
        <header class="header">
          <span class="text">1.FACE</span>
          <span class="loader"></span>
        </header>
        <ul class="img">
            <li><img id="faceImg" src="images/img5.jpg"></li>
        </ul>
    </div>
    <div class="selectFace" id="selectFace">
        <ul class="faceList">
            <li><img src="images/img1.jpg" name="img1"></li>
            <li><img src="images/img2.jpg" name="img2"></li>
            <li><img src="images/img3.jpg" name="img3"></li>
            <li><img src="images/img4.jpg" name="img4"></li>
            <li><img src="images/img5.jpg" name="img5"></li>
            <li><img src="images/img6.jpg" name="img6"></li>
        </ul>
    </div>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/index.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script type="text/javascript">
       var userImg = null;
       var selectFace = document.getElementById('selectFace');
       var img = selectFace.getElementsByTagName('img');
       for(var i = 0; i < img.length; i++){
            img[i].onclick = function(){
                userImg = this.getAttribute('name');
                var selectFace = document.getElementById('selectFace');
                selectFace.style.display = 'none';
                var login = document.getElementById('login');
                login.style.display = "inline";
            }
       }

       document.getElementById('btnLogin').addEventListener('click', function() {
            var nickName = document.getElementById('nicknameInput').value;
            //检查昵称输入框是否为空
            if (nickName.trim().length != 0) {
                var socket = io();
                //不为空，则发起一个login事件并将输入的昵称发送到服务器
                socket.emit('join', nickName);
                socket.on('broadcast_join', function(flag){
                    location.href = "index?username="+nickName+"&userImg="+userImg;
                });
            } else {
                //否则输入框获得焦点
                document.getElementById('nicknameInput').focus();
            };
        }, false);
       document.getElementById('faceImg').addEventListener('click',function(){
            var face = document.getElementById('face');
            var selectFace = document.getElementById('selectFace');
            face.style.display = 'none';
            selectFace.style.display = 'inline';
       });

    </script>
</body>
</html>